<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="http://at.alicdn.com/t/c/font_4000250_cf7dkayo82u.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/ajax.js"></script>
    <!-- <link rel="stylesheet" href="./css/detail.css"> -->
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/swiper2.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    img {
        display: block;
    }

    a {
        text-decoration: none;
        color: rgb(153, 153, 153);
    }

    html,
    body {
        height: 100%;
    }

    body {
        position: relative;
        background-color: #efeeee;
    }

    /* 第一部分 nav */
    .nav {
        background-color: rgb(227, 228, 229);
    }

    .navC {
        width: 1300px;
        margin: 0 auto;
        padding-top: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navC>.left>ul {
        display: flex;
        align-items: center;
    }

    .navC>.left>ul>li {
        display: flex;
        align-items: center;
    }

    .navC>.left>ul>li:nth-of-type(2) {
        margin-left: 15px;
    }

    .navC>.left>ul>li>span {
        margin-left: 6px;
        color: #828282;
        letter-spacing: 1px;
    }

    .navC>.left>ul>li>svg {
        width: 25px;
        height: 25px;
    }

    .navC>.right>ul {
        display: flex;
        align-items: center;
    }

    .navC>.right>ul>li {
        height: 15px;
        padding: 0 10px;
        border-left: 1px solid #b2b2b2;
        display: flex;
        align-items: center;
    }

    .navC>.right>ul>li:nth-of-type(1) {
        border: none;
    }

    /* 第二部分 */
    .search {
        width: 1300px;
        /* height: 300px; */
        margin: 0 auto;
        background-color: #fff;
    }

    .searchTop {
        /* background-color: yellowgreen; */
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
    }

    .searchTop>img {
        height: 90px;
    }

    .searchTop>div {
        width: 650px;
        margin-right: 100px;
        margin-top: 30px;
        position: relative;
    }

    #ul {
        width: 300px;
        background-color: rgb(247, 244, 246);
        position: absolute;
        top: 50px;
        z-index: 2;
        padding: 0;
        border-radius: 10px;
        font-weight: 700;
        display: none;
    }

    .searchTop>div>.ul2 {
        padding: 0;
        display: flex;
    }

    .searchTop>div>.ul2>li {
        height: 17px;
        padding: 0 12px;
        border-left: 1px solid #cecece;
        color: #cecece;
        display: flex;
        align-items: center;
    }

    .searchTop>div>.ul2>li:nth-of-type(1) {
        padding-left: 0;
        border-left: none;
    }

    .searchBottom {
        height: 55px;
        /* background-color: pink; */
        display: flex;
        align-items: center;
    }

    .searchBottom>div {
        width: 250px;
        height: 100%;
        background-color: rgb(255, 128, 0);
        border-radius: 26px 26px 0 0;
        color: #fff;
        font-size: 20px;
        padding-left: 15px;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
    }

    .searchBottom>div:hover {
        cursor: pointer;
    }

    .searchBottom>div>svg {
        width: 30px;
        margin-right: 10px;
    }

    .searchBottom>div>span {
        display: block;
        margin-top: 1px;
    }

    .searchBottom>ul {
        padding-top: 15px;
        display: flex;
    }

    #searchBot>li {
        font-size: 17px;
        font-weight: bold;
        letter-spacing: 1px;
        margin-right: 20px;
        display: flex;
        align-items: center;
    }

    #searchBot>li:hover {
        cursor: pointer;
        color: rgb(244, 52, 52);
    }

    #searchBot>li:nth-of-type(1) {
        font-size: 25px;
        color: red;
        font-family: "楷体";
    }

    /* 第三部分 banner */
    .banner {
        background-color: rgb(255, 255, 255);
        color: rgb(113, 124, 131);
    }

    .bannerC {
        width: 1300px;
        margin: 0 auto;
        /* background-color: yellowgreen; */
        box-shadow: 0px 0px 5px 2px #cecece;
        border-bottom: 1px solid #cecece;
        display: flex;
        justify-content: space-between;
    }

    .bannerLeft {
        width: 600px;
        height: 55px;
        /* background-color: aqua; */
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 55px;
    }

    .bannerRight {
        width: 300px;
        height: 55px;
        font-size: 12px;
        display: flex;
    }

    .bannerRight>div {
        margin-right: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bannerRight>div:nth-of-type(1) {
        width: 145px;
        margin-top: 18px;
    }

    .bannerRight>div>svg {
        width: 25px;
        margin-right: 5px;
    }

    .bannerRight>div:nth-of-type(1)>p:nth-child(1) {
        width: 32px;
        height: 20px;
        background-color: red;
        color: #fff;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 第四部分 info */
    .info {
        width: 1300px;
        height: 950px;
        margin: 0 auto;
        /* background-color: yellowgreen; */
        display: flex;
        justify-content: space-between;
    }

    .info>div {
        /* width: 32%; */
        height: 100%;
        /* background-color: skyblue; */
        /* margin-left: 5px; */
        background-color: #fff;
    }

    /* 放大镜 */
    .info>.left {
        width: 400px;
        margin-left: 0;
    }

    /* .outer {
    margin-top: 50px;
    margin-left: 100px;
} */

    .show {
        width: 400px;
        height: 500px;
        border: 1px solid #cecece;
        border-top: none;
        box-sizing: border-box;
        position: relative;
    }

    .smallImg {
        width: 100%;
        height: 100%;
    }

    .fullShow {
        display: none;
        width: 110px;
        height: 110px;
        background-color: rgb(229, 68, 10);
        border-radius: 50%;
        position: absolute;
        /* z-index: 10; */
        top: 0;
        left: 0;
        opacity: 0.5;
        pointer-events: none;
    }

    .bigShow {
        display: none;
        width: 595px;
        height: 600px;
        border: 2px solid #cecece;
        box-sizing: border-box;
        box-shadow: 0px 0px 5px 2px black;
        position: absolute;
        left: 401px;
        overflow: hidden;
        top: 1px;
        pointer-events: none;
    }

    .bigImg {
        width: 200%;
        height: 200%;
        position: relative;
        top: 0;
        left: 0;
    }

    /* 
.stopKey {
    position: absolute;
    bottom: 100px;
    left: calc(50% - 50px);
}

.stopKey>svg {
    width: 100px;
    height: 100px;
    opacity: 0.9;
} */

    /* 轮播 */
    .leftSwiper {
        width: 400px;
        height: 100px;
        margin-top: 10px;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .infoThree {
        height: 60px;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .infoThreeChild {
        background-color: red;
    }

    .info>.left>p {
        width: 180px;
        height: 50px;
        /* background-color: red; */
        border: 1px solid #cecece;
        margin: 20px auto;
        text-align: center;
        line-height: 50px;
        font-size: 22px;
        color: #828282;
    }

    .info>.left>p:hover {
        cursor: pointer;
        border-color: red;
    }

    .info>.mid {
        width: 600px;
        /* background-color: rgb(178, 169, 242); */
    }

    /* .info>.mid */
    .midOne {
        padding-top: 10px;
        display: flex;
        align-items: center;
    }

    .midOne>p {
        margin: 0;
        font-size: 20px;
    }

    .midOne>p:nth-child(1) {
        width: 100px;
        height: 30px;
        background-color: rgb(3, 167, 114);
        color: rgb(243, 239, 239);
        letter-spacing: 2px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .midOne>p:nth-child(2) {
        /* flex: 1; */
        width: 490px;
        height: 33px;
        font-size: 25px;
        font-weight: bold;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .midTwo {
        height: 60px;
        background-color: rgba(253, 67, 135, 1);
        border-radius: 10px;
        padding-bottom: 2px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .midTwo>div:nth-of-type(1) {
        font-size: 26px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 1px;
        /* display: flex; */
    }

    .midTwo>div:nth-of-type(2) {
        font-size: 16px;
        color: #fff;
        display: flex;
        align-items: center;
        /* justify-content: center; */
    }

    .midTwo>div:nth-of-type(2)>h2 {
        font-size: 25px;
        font-weight: lighter;
        margin: 0;
    }

    .midTwo>div:nth-of-type(2)>p {
        padding-top: 15px;
        margin-left: 12px;
    }

    .midTwo>div:nth-of-type(2)>.kill {
        height: 66px;
        padding-top: 18px;
        padding-right: 15px;
        display: flex;
        /* justify-content: flex-start; */
    }

    .kill>li {
        width: 45px;
        height: 45px;
        background-color: rgb(23, 23, 23);
        margin: 0 5px;
        font-size: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .midThree {
        margin-top: 650px;
        padding-left: 50px;
        padding-top: 20px;
        border-top: 1px solid #cecece;
        display: flex;
    }

    .midThree>div {
        margin-right: 40px;
    }

    .midThree>div:nth-of-type(1) {
        position: relative;
    }

    .midThree>div:nth-of-type(1)>p {
        width: 27px;
        height: 30px;
        background-color: rgb(241, 241, 241);
        font-size: 30px;
        border: 1px solid #cecece;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    .midThree>div:nth-of-type(1)>p:nth-of-type(1) {
        left: 58px;
    }

    .midThree>div:nth-of-type(1)>p:nth-of-type(2) {
        top: 30px;
        left: 58px;
    }

    .midThree>div:nth-of-type(1)>input {
        width: 58px;
        height: 60px;
        outline: none;
        border: 1px solid #cecece;
        padding-left: 5px;
        font-size: 24px;
    }

    .midThree>div:nth-of-type(2) {
        width: 180px;
        height: 60px;
        background-color: red;
        font-size: 24px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 1px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .midFour {
        padding-left: 50px;
        margin-top: 30px;
        color: rgb(139, 141, 144);
        font-size: 15px;
    }

    .midFour>span {
        margin-right: 18px;
    }

    .info>.right {
        width: 300px;
        background-color: skyblue;
    }

    /* 第五部分 detail */
    .detail {
        width: 1300px;
        height: 500px;
        margin: 0 auto;
        /* background-color: yellowgreen; */
    }

    .detail>p {
        height: 80px;
        background-color: #fff;
        text-align: center;
        line-height: 80px;
        font-size: 40px;
        margin-top: 10px;
        font-weight: bold;
    }

    .detai {
        font-size: 20px;
        color: rgb(173, 182, 183);
        padding: 20px;
        padding-left: 30px;
        border-bottom: 1px solid #cecece;
        background-color: #fff;
    }

    .intro {
        background-color: #fff;
        padding: 10px 200px;
    }
</style>

<body>

    <!-- 第一部分 nav -->
    <div class="nav">
        <div class="navC">
            <div class="left">
                <ul>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fangzi"></use>
                        </svg>
                        <span><a style="text-decoration: none; color: #919090;" href="./index.html"
                                target="_blank">京东首页</a></span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon--"></use>
                        </svg>
                        <span>河北</span>
                    </li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li><a style="text-decoration: none; color: #919090;" href="#">我的</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">我的订单</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">我的京东</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">企业采购</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">商家服务</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">网站导航</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">手机京东</a></li>
                    <li><a style="text-decoration: none; color: #919090;" href="#">网站无障碍</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 第二部分 search -->
    <div class="search">
        <div class="searchTop">
            <img src="./images/login01.png" alt="">
            <div>
                <div class="input-group mb-3">
                    <input id="input1" type="text" class="form-control" placeholder="京东起飞了"
                        aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <span
                        style="cursor: pointer; background-color: rgb(255, 128, 0); width: 100px; justify-content: center; font-size: 20px; color: #fff;"
                        class="input-group-text" id="basic-addon2" onClick="alert('ok')">
                        搜索
                    </span>
                </div>
                <ul id="ul"></ul>
                <ul class="ul2">
                    <li>大米5kg</li>
                    <li>花生油</li>
                    <li>大米自营</li>
                    <li>粉丝</li>
                    <li>鲁花</li>
                    <li>花生油5l</li>
                    <li>三得利</li>
                    <li>蒙古</li>
                </ul>
            </div>
        </div>
        <div class="searchBottom">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lvse_jilu"></use>
                </svg>
                <span>分类</span>
            </div>
            <ul id="searchBot">
            </ul>
        </div>
    </div>

    <!-- 第三部分 banner -->
    <div class="banner">
        <div class="bannerC">
            <div class="bannerLeft"></div>
            <div class="bannerRight">
                <div>
                    <p>自营</p>
                    <p>京东自营旗舰店</p>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiaozhizuomoban"></use>
                    </svg>
                    <span>问营养</span>
                </div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon--"></use>
                    </svg>
                    <span>关注店铺</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 第四部分 info -->
    <div class="info">
        <div class="left">
            <div class="outer">
                <div class="show">
                    <img class="smallImg" src="./images/1.png" alt="">
                    <div class="fullShow"></div>
                    <!--  <div class="stopKey">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiayishoubofang"></use>
                        </svg>
                    </div> -->
                    <div class="bigShow">
                        <img class="bigImg" src="./images/1.png" alt="">
                    </div>
                </div>
            </div>
            <div class="leftSwiper">
                <div class="swiper mySwiper1">
                    <div class="swiper-wrapper">
                        <!--  <div class="swiper-slide"><img src="./images/login04.png" alt=""></div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                        <div class="swiper-slide">Slide 4</div>
                        <div class="swiper-slide">Slide 5</div>
                        <div class="swiper-slide">Slide 6</div>
                        <div class="swiper-slide">Slide 7</div>
                        <div class="swiper-slide">Slide 8</div>
                        <div class="swiper-slide">Slide 9</div>
                        <div class="swiper-slide">Slide 10</div>
                        <div class="swiper-slide">Slide 11</div>
                        <div class="swiper-slide">Slide 12</div> -->
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
            <div class="infoThree">
                <div>
                    <svg class="icon" aria-hidden="true" style="width:30px; height:30px;border-radius:50%;">
                        <use xlink:href="#icon-aixin"></use>
                    </svg>
                    <span>关注</span>
                </div>
                <p>举报</p>
            </div>
            <p>企业购更优惠</p>
        </div>
        <div class="mid">
            <div class="midOne">
                <p>京东超市</p>
                <p></p>
            </div>
            <div class="midTwo">
                <div>
                    <svg class="icon" aria-hidden="true" style="width: 45px; height:45px;">
                        <use xlink:href="#icon-naozhong"></use>
                    </svg>
                    <span>京东秒杀</span>
                </div>
                <div>
                    <h2>距离结束</h2>
                    <p>
                        <svg class="icon" aria-hidden="true" style="width: 30px; height:30px;">
                            <use xlink:href="#icon-shandian"></use>
                        </svg>
                    </p>
                    <ul class="kill">
                        <li>00</li>:
                        <li>00</li>:
                        <li>00</li>
                    </ul>
                </div>
            </div>
            <div class="midThree">
                <div class="midInput">
                    <input type="text" value="1">
                    <p>+</p>
                    <p>-</p>
                </div>
                <div class="btn1">
                    加入购物车
                </div>
            </div>
            <div class="midFour"><span>温馨提示</span><span>*不支持7天无理由退货</span>*此商品不可使用金品奖京劵、金品奖东劵</div>
        </div>
        <div class="right"></div>
    </div>

    <!-- 第五部分 detail -->
    <div class="detail">
        <p>详细</p>
        <div class="detai">
            <!-- <p>类型：食品酒水</p>
            <p>商品名称：111111111111</p>
            <p>现价：1.00</p>
            <p>打折类型：100%</p> -->
        </div>
        <div class="intro">

        </div>
    </div>

    <script src="./lib/swiper2.js"></script>
    <script>

        const baseURL = 'http://localhost:8888';

        /* 第二部分 search */
        // 搜索框，模糊查询
        let input1 = document.querySelector('#input1');
        let list = document.querySelector('#ul');
        input1.oninput = function (evt) {
            ul.style.display = 'block'
            if (!evt.target.value) {
                return;
            }
            var oScript = document.createElement("script");
            oScript.src = `https://suggest.taobao.com/sug?k=1&area=c2c&q=${evt.target.value}&code=utf-8&ts=1680769426499&callback=test`;
            document.body.appendChild(oScript);
            oScript.onload = function () {
                oScript.remove();
            }
        }
        input1.onfocus = () => {
            ul.style.display = 'block';
        }
        input1.onblur = () => {
            ul.style.display = 'none';
        }

        function test(obj) {
            if (obj.result.length != 0) {
                list.innerHTML = obj.result.map(item => `<li>${item[0]}</li>`).join('');
            } else {
                list.innerHTML = `<li>对不起~.~</li><li>这里什么也没有</li>`;
            }
        }

        // 第二部分下面
        axios("/goods/category", {
            method: 'get',
            baseURL,
        }).then(res => {
            res = res.data.list.slice(3, 11);
            searchBot.innerHTML = res.map(item => `<li>${item}</li>`).join('');
        })

        searchBot.onclick = () => {
            open('index.html', '_blank');
        }

        /* 第三部分 banner */
        // 通过主页点击商品，提取对应商品id，提取数据渲染界面
        // 因为id唯一，我帮放大镜也获取对应id的图片
        let bannerLeft = document.querySelector('.bannerLeft');
        let smallImg = document.querySelector('.smallImg');
        let bigImg = document.querySelector('.bigImg');
        let midOneP2 = document.querySelector('.midOne>p:nth-child(2)');
        axios("/goods/item", {
            method: 'get',
            baseURL,
            params: {
                id: localStorage.getItem('gid'),
            }
        }).then(res => {
            // console.log(res.data.info);
            res = res.data.info;
            bannerLeft.innerText = res.title;
            midOneP2.innerText = res.title;
            smallImg.src = res['img_big_logo'];
            bigImg.src = res['img_big_logo'];
        })

        /* 第四部分 info */
        // left 放大镜
        window.addEventListener("load", function () {
            let show = document.querySelector(".show");
            let fullShow = document.querySelector(".fullShow");
            let bigShow = document.querySelector(".bigShow");
            let bigImg = document.querySelector(".bigImg");

            show.addEventListener("mouseover", function () {
                fullShow.style.display = "block";
                bigShow.style.display = "block";
            })

            show.addEventListener("mouseout", function () {
                fullShow.style.display = "none";
                bigShow.style.display = "none";
            })

            show.addEventListener("mousemove", function (e) {
                let evt = e || window.event;
                // let x = e.offsetX;
                // let y = e.offsetY;

                // 鼠标居中
                let x = evt.offsetX - fullShow.offsetWidth / 2;
                let y = evt.offsetY - fullShow.offsetHeight / 2;

                /* 比例问题 */
                let bX = evt.offsetX * bigShow.offsetWidth / show.offsetWidth;
                let bY = evt.offsetY * bigShow.offsetHeight / show.offsetHeight;


                if (x <= 0) { x = -fullShow.offsetWidth / 2 }
                if (y <= 0) { y = -fullShow.offsetHeight / 2 }
                if (x >= show.offsetWidth - fullShow.offsetWidth / 2) { x = show.offsetWidth - fullShow.offsetWidth / 2 }
                if (y >= show.offsetHeight - fullShow.offsetHeight / 2) { y = show.offsetHeight - fullShow.offsetHeight / 2 }

                // 鼠标居中
                fullShow.style.left = x + "px";
                fullShow.style.top = y + "px";

                bigImg.style.left = -bX + "px";
                bigImg.style.top = -bY + "px";

            });
        }) // load

        // 轮播
        let leftSwiper = document.querySelector('.leftSwiper>div>div');
        axiosGet({
            category: localStorage.getItem('category'),
            pagesize: 15,
        }).then(res => {
            res = res.data.list
            leftSwiper.innerHTML = res.map(item => `<div class="swiper-slide"><img src="${item['img_big_logo']}"></div>`).join('');
            var swiper = new Swiper(".mySwiper1", {
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                // 一次几个
                slidesPerView: 5,
                // 项目之间距离
                spaceBetween: 8,
                // 一次划过几个
                slidesPerGroup: 1,
                loop: true,
                loopFillGroupWithBlank: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        });

        // 根据需求获取商品列表
        function axiosGet(data) {
            let params = {
                // current: 1, 
                pagesize: 200,
                search: '',
                filter: '',
                category: '',
                saleType: 10,
                sortType: 'price',
                ...data,
            }
            // console.log('search: ', params);
            return axios('/goods/list', {
                headers: {
                    "authorization": localStorage.getItem("token"),
                },
                baseURL: 'http://localhost:8888',
                params,
            });
        } // axiosGet
        let infoThreeDiv = document.querySelector('.infoThree>div')
        let infoThree = document.querySelector('.infoThree>div>svg');
        infoThreeDiv.onclick = () => {
            infoThreeDiv.style.cursor = 'pointer';
            infoThree.classList.toggle('infoThreeChild');
        }

        // 秒杀
        let kills = document.querySelectorAll('.kill>li');
        let targetTime = new Date('2023/5/30 15:00:00');

        function diffTime(targetT) {
            let currentT = new Date();
            let sub = Math.ceil((targetT - currentT) / 1000);
            let hours = parseInt(sub / 60 / 60) % 24;
            let minutes = parseInt(sub / 60) % 60;
            let seconds = sub % 60;
            return { hours, minutes, seconds };
        }

        setInterval(() => {
            let res = diffTime(targetTime);
            res.hours < 10 ? kills[0].innerHTML = '0' + res.hours : kills[0].innerHTML = res.hours;
            res.minutes < 10 ? kills[1].innerHTML = '0' + res.minutes : kills[1].innerHTML = res.minutes;
            res.seconds < 10 ? kills[2].innerHTML = '0' + res.seconds : kills[2].innerHTML = res.seconds;

        }, 1000);

        // 加入购物车
        let midInput = document.querySelector('.midInput');
        // 输入框
        let input = midInput.querySelector('input');
        // 加
        let plus = midInput.querySelectorAll('p')[0];
        // 减
        let minus = midInput.querySelectorAll('p')[1];

        plus.onclick = () => {
            input.value++;
            return false;
        }
        minus.onclick = () => {
            if (input.value == 1) return;
            input.value--;
            return false;
        }


        let btn = document.querySelector('.btn1');
        btn.onclick = () => {
            // open('03-cart.html');
            if (!localStorage.getItem('flag')) {
                alert('请先登录，宝~.~');
                open('02-login.html');
                return;
            }
            ajaxx({
                type: 'post',
                url: baseURL + '/cart/add',
                author: true,
                params: {
                    id: localStorage.getItem('uid'),
                    goodsId: localStorage.getItem('gid'),
                },
                fn(res) {
                    code = JSON.parse(res).code;
                    if (code == 1) {
                        axios("/cart/list", {
                            baseURL,
                            headers: {
                                "authorization": localStorage.getItem("token"),
                            },
                            params: {
                                id: localStorage.getItem('uid'),
                            }
                        }).then(res => {
                            let data = res.data.cart;
                            console.log(data);
                            let num = 0;
                            for (let i = 0; i < data.length; i++) {
                                if (data[i]["goods_id"] == localStorage.getItem('gid')) {
                                    num = data[i]['cart_number'];
                                    break;
                                }
                            }
                            num += input.value - 1;
                            // console.log(num);
                            ajaxx({
                                type: 'post',
                                url: baseURL + '/cart/number',
                                author: true,
                                params: {
                                    id: localStorage.getItem('uid'),
                                    goodsId: localStorage.getItem('gid'),
                                    number: num,
                                },
                                fn(res) {
                                    console.log(JSON.parse(res));
                                    if (JSON.parse(res).code == 1) {
                                        alert('添加成功~.~')
                                        location.href = '03-cart.html';
                                    } else {
                                        alert('添加失败：' + JSON.parse(res).message);
                                    }
                                }
                            }); // ajaxx
                        })
                    }
                }
            }); // ajaxx
        } // click

        let detai = document.querySelector('.detai');
        let intro = document.querySelector('.intro');
        axios('/goods/item', {
            method: 'get',
            baseURL,
            params: {
                id: localStorage.getItem("gid"),
            }
        }).then(res => {
            res = res.data.info;
            console.log(res);
            detai.innerHTML = `<p>类型：${res.category}</p>
            <p>商品名称：${res.title}</p>
            <p>现价：${res['current_price']}</p>
            <p>打折类型：${res['sale_type']}</p>
            <p>原价：${res['price']}</p>`;
            intro.innerHTML = `${res['goods_introduce']}`
        })



    </script>
</body>

</html>